<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>大麦商城</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/product.css" rel="stylesheet" type="text/css" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 引入Vue -->
<script src="js/vue.min.js"></script>
<!-- 引入axios -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<!--引入自定义js文件 用到Vue  在Vue后面引入  -->
<script  src="js/damai.js"></script>
<script src="js/top.js"></script>
<script type="text/javascript">
$(function() {
	$.get("clist.s", null, function(json){
		//反引号 使用后可以随便换行(属于字符串)
		let html = 
			`<li><a href="###"> ??? </a> |</li>`
			let list = JSON.parse(json);
			//查找 分类商品的容器元素
			let $ClistUl = $("#ClistSpan .mainNav").get(0);
			
			for(let p of list){
				//替换html中的字符串
				//替换地址
				let pHtml = html.replace("###","clist.html?cid="+p.cid);
				//替换内容
				pHtml = pHtml.replace("???",p.cname);
				//创建jQuery对象
				let $p = $(pHtml);
				//追加元素必须使用DOM对象
				$ClistUl.append($p[0]);
			}
		
	});
});

</script>
</head>
<body>
<div id="index">
	<div class="container header">

		<div class="span5">
			<div class="logo">
				<a href="index.html"> <img
					src="image/r___________renleipic_01/logo.png" alt="依依不舍" />
				</a>
			</div>
		</div>
		<div class="span9">
			<div class="headerAd">
				<img src="image/header.jpg" width="320" height="50" alt="正品保障"
					title="正品保障" />
			</div>
		</div>
		<div class="span10 last">
			<top></top>
			<div class="cart">
				<a href="cart.html">购物车</a>
			</div>
			<div class="phone">
				客服热线: <strong>13234390126</strong>
			</div>
		</div>

		<div class="span24" id="ClistSpan">
			<ul class="mainNav">
				<li><a href="index.html">首页</a> |</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		new Vue({
			el : ".header"
		})
	</script>
	<div class="container productList">
		<div class="span6">
			<div class="hotProductCategory">
				<bigflgory></bigflgory>

			</div>
		</div>
		<script type="text/javascript">
		new Vue({
			el:".span6"
		})
		
		</script>
		<div id="result" class="result table clearfix">
					<ul>
					<li v-for="(item,i) in id">
					<a :href="'detail.html?pid='+item.pid">
					 <img :src="item.image" width="170" height="170" style="display: inline-block;" />
					 <span style='color: green'> {{item.pname}} </span> 
					 <span class="price">
							商城价： ￥{{item.shopPrice}}/份 
					</span>
					</a>
				</li>
						

					</ul>
				</div>
</div>
		<div class="span18 last">
			<form id="productForm" action="image/蔬菜 - Powered By Mango Team.htm"
				method="get">
				<input type="hidden" id="brandId" name="brandId" value="" /> <input
					type="hidden" id="promotionId" name="promotionId" value="" /> <input
					type="hidden" id="orderType" name="orderType" value="" /> <input
					type="hidden" id="pageNumber" name="pageNumber" value="1" /> <input
					type="hidden" id="pageSize" name="pageSize" value="20" />

				

				<div class="pagination">
					第1/6 <span class="currentPage">1</span> 
					<a v-for=" p of pages " :href="'clist.html?cid=' + cid + '&page=' + p">{{p}}</a>
					<a class="nextPage" :href="'clist.html?cid=' + cid + '&page=' + (page + 1)">&nbsp;</a>
					<a class="lastPage" :href="'clist.html?cid=' + cid + '&page=' + pages">&nbsp;</a>

				</div>
			</form>
		</div>
	</div>
	
		<script type="text/javascript">
				var v1 = new Vue({
					el : "#index",
					data : {
						id:'',
						// 新增的变量						
						rows : 0,
						// 总页数
						pages : 1,
						// 当前
						page: 1,
						// 分类id
						cid : 0
					},
					created(){
						let cid = location.search.replace(/\?cid=(\d+)/,"$1");
						if(location.search.indexOf("page")>0){
							this.page = location.search.replace(/.+&page=(\d+)/,"$1");
						} else {
							this.page = 1;
						}
						console.info(this.page);
						
						cid = cid.split("&");
						id = cid[0];
						// 
						this.cid = id;
						
						axios.post("type.s?cid="+id + "&page=" + this.page).then(res=>{
							// res.data  之前  ==>  [  ...  ]
							// res.data  现在 ==>  { ... }
							
							this.id = res.data.list;
							this.rows = res.data.rows;
							this.pages = parseInt ( this.rows / 12 );
							this.pages += this.rows % 12 == 0 ? 0 : 1;
							
						})
					}
				})
			</script>
	
	<div class="container footer">
		<div class="span24">
			<div class="footerAd">
				<img src="image/footer.jpg" width="950" height="52" alt="我们的优势"
					title="我们的优势" />
			</div>
		</div>
		<div class="span24">
			<ul class="bottomNav">
				<li><a>关于我们</a> |</li>
				<li><a>联系我们</a> |</li>
				<li><a>诚聘英才</a> |</li>
				<li><a>法律声明</a> |</li>
				<li><a>友情链接</a> |</li>
				<li><a target="_blank">支付方式</a> |</li>
				<li><a target="_blank">配送方式</a> |</li>
				<li><a>SHOP++官网</a> |</li>
				<li><a>SHOP++论坛</a></li>
			</ul>
		</div>
		<div class="span24">
			<div class="copyright">Copyright © 2005-2013 Mango商城 版权所有</div>
		</div>
	</div>
</body>
</html>